<template>
	<view class="content">
		<view class="content_line">
			<!-- 外围边框 -->
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>
			<!-- 主要内容区 -->
			<view class="context_view">
				<image class="img_suancaishen" src="../../static/suancaishen.png" mode="aspectFit"></image>
				<image class="img_slogin" src="../../static/slogin.png" mode="aspectFit"></image>
				<image class="img_caishen" src="../../static/caishen.png" mode="aspectFit"></image>
				<view style="width: 544rpx;height: 3rpx;background: #a0c4d2;margin-top: 47rpx;"></view>
				<text style="align-self: flex-start; margin-left: 56rpx;font-size: 30rpx;color: #53534e;margin-top: 31rpx;">算财运 申请获取以下权限</text>
				<text style="align-self: flex-start; margin-left: 56rpx;font-size: 30rpx;color: #9c9790;margin-top: 31rpx;">获得你的公开信息(昵称、头像等)</text>
				<button
					type="primary"
					open-type="getUserInfo"
					@getuserinfo="bindGetUserInfo"
					lang="zh_CN"
					style="margin-top: 50rpx;width: 556rpx;height: 83rpx;font-size: 30rpx;color: #FFFFFF;"
				>
					允许使用
				</button>

				<view class="exit_view">
					<navigator
						open-type="exit"
						target="miniProgram"
						hover-class="navigator-hover"
						style="color: #99c3d6; font-size: 30rpx;width: 100%;height: 100%;text-align: center;line-height: 83rpx;"
					>
						取消
					</navigator>
				</view>
			</view>

			<!-- 外围边框 -->
			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>
	</view>
</template>

<script>
import helper from '../../common/helper.js';
export default {
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	created() {},
	methods: {
		// 允许使用按钮的触发事件:拿去微信信息成功后，向微信拿openid的前置数据code，发送code给后台，后台用code拿openid并注册，再送3天会员
		bindGetUserInfo: function(e) {
			console.log("-----------5-----------" + helper.commentUserId);
			if (e.detail.userInfo) {
				console.log('用户确认授权了');
				wx.login({
					success(res) {
						if (res.code) {
							uni.showLoading({
								title: '登录中'
							});
							//发起网络请求
							wx.request({
								url: helper.websiteUrl + '/api/v1/wxlogin',
								method: 'POST',
								data: {
									code: res.code,
									avatarUrl: e.detail.userInfo.avatarUrl,
									province: e.detail.userInfo.province,
									city: e.detail.userInfo.city,
									nickName: e.detail.userInfo.nickName,
									gender: e.detail.userInfo.gender,
									commentUserIdStr: helper.commentUserId
								},
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: function(res) {
									uni.hideLoading();
									helper.myToken = res.data.data.token;
									console.log('token = ' + helper.myToken);
									// 访问成功
									uni.setStorage({
										key: 'token',
										data: res.data.data.token
									});

									uni.switchTab({
										url: '../homePage'
									});
								}
							});
						} else {
							uni.hideLoading();
							console.log('微信登录失败！' + res.errMsg);
							uni.redirectTo({
								url: './index'
							});
						}
					}
				});
			} else {
				console.log('拒绝了');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	border-style: solid;
	border-width: 18rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	background: #e6dcc8;
}

.content_line {
	width: 90%;
	height: 100%;
	border-style: solid;
	border-width: 9rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-top: -17rpx;
}

.content_rt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-top: -17rpx;
}

.content_lb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}

.content_rb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.img_suancaishen {
	width: 410rpx;
	height: 146rpx;
}

.img_slogin {
	width: 634rpx;
	height: 88rpx;
}

.img_caishen {
	width: 287rpx;
	height: 367rpx;
}

.exit_view {
	width: 556rpx;
	height: 83rpx;
	margin-top: 18rpx;
	border-style: solid;
	border-width: 2rpx;
	border-color: #99c3d6;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
